<template>
  <view class="introduce-container mx-[30rpx]">
    <view class="video-description-container text-[#333333] text-[30rpx]">
      <view
        ref="descriptionEl"
        class="description-text"
        :class="{
          expanded: isExpanded,
          'has-toggle': showToggle,
        }"
        @click="toggleExpand"
      >
        {{ videoDescription }}
      </view>
      <image
        v-show="showToggle"
        src="@/static/images/icon-down.png"
        mode="aspectFit"
        class="toggle-icon w-[32rpx] h-[32rpx]"
        :class="{ up: isExpanded }"
        @click.stop="toggleExpand"
      />
    </view>
    <view class="gap-line my-[30rpx]"></view>
    <view class="live-item" v-for="(item, index) in list" :key="index">
      <view class="my-[20rpx] flex flex-row items-center">
        <view class="w-[320rpx] h-[180rpx] mr-[20rpx] relative">
          <image
            :src="item.videoPoster"
            mode="aspectFill"
            class="w-[320rpx] h-[180rpx] rounded-[16rpx]"
          />
          <view
            class="play-btn w-[36rpx] h-[36rpx] rounded-[50%] bg-[#000000] opacity-50 flex justify-center items-center"
          >
            <view class="arrow-right"></view>
          </view>
        </view>
        <view class="h-[100%] flex flex-col justify-around grow">
          <view
            class="text-[#222222] text-[28rpx] max-w-full overflow-hidden text-ellipsis line-clamp-2 mt-[12rpx] mb-[16rpx]"
            >{{ item.videoTitle }}</view
          >
          <view class="flex flex-row items-center mt-[30rpx]">
            <view
              class="flex flex-row items-center text-[22rpx] text-[#999999]"
            >
              <uni-icons
                type="eye-filled"
                size="15"
                color="#BFBFBF"
              ></uni-icons>
              <view class="pl-[8rpx]">1463</view>
            </view>
            <view
              class="flex flex-row items-center text-[22rpx] text-[#999999] ml-[40rpx]"
            >
              <uni-icons
                type="chat-filled"
                size="15"
                color="#BFBFBF"
              ></uni-icons>
              <view class="pl-[8rpx]">52</view>
            </view>
          </view>
        </view>
      </view>
      <view class="gap-line" v-if="index + 1 != list.length"></view>
      <view class="h-[20rpx]" v-else></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, computed, nextTick } from "vue";

// const videoDescription = ref(
//   `这是一个非常长的视频描述，需要测试文本超出两行的显示效果。这里的内容应该足够长，长到可以确保在大多数屏幕尺寸下都会超过两行的显示限制。我们可以继续添加更多文字来确保这个效果。`
// );
const videoDescription = ref("这是一段视频描述内容");
const isExpanded = ref(false);
const descriptionEl = ref(null);
const hasOverflow = ref(false);

// 检测文本是否溢出
const checkOverflow = () => {
  nextTick(() => {
    if (!descriptionEl.value) return;
    const el = descriptionEl.value;
    hasOverflow.value = el.scrollHeight > el.clientHeight;
  });
};

// 计算是否显示切换图标
const showToggle = computed(() => {
  return hasOverflow.value || isExpanded.value;
});

// 切换展开状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
  if (!isExpanded.value) checkOverflow();
};

const list = reactive([
  {
    videoPoster:
      "https://img1.baidu.com/it/u=261249861,1096372910&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
    videoTitle: "这是一个视频标题",
    videoContent:
      "文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
    time: "2025年2月13日 22:23:54",
  },
  {
    videoPoster:
      "https://img1.baidu.com/it/u=2106142011,1410854447&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=26d84943f61687a3f3e58b83205966cd",
    videoTitle: "这是一个视频标题",
    videoContent:
      "文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
    time: "2025年2月13日 22:23:54",
  },
  {
    videoPoster:
      "https://img1.baidu.com/it/u=261249861,1096372910&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
    videoTitle: "这是一个视频标题",
    videoContent:
      "文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
    time: "2025年2月13日 22:23:54",
  },
  {
    videoPoster:
      "https://img1.baidu.com/it/u=2106142011,1410854447&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=26d84943f61687a3f3e58b83205966cd",
    videoTitle: "这是一个视频标题",
    videoContent:
      "文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
    time: "2025年2月13日 22:23:54",
  },
]);

// 初始检测
onMounted(checkOverflow);

// 监听内容变化
watch(videoDescription, checkOverflow);
</script>

<style lang="scss" scoped>
.introduce-container {
  /* 移动端优化样式 */
  .video-description-container {
    position: relative;
    max-width: 100%;
  }

  .description-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
    transition: 0.3s;
    padding-right: 0;
    position: relative;
  }

  .description-text.has-toggle {
    padding-right: 32rpx; //增加点击区域
  }

  .description-text.expanded {
    -webkit-line-clamp: unset;
    display: block;
  }

  .toggle-icon {
    position: absolute;
    right: 0px;
    bottom: 0px;
    cursor: pointer;
    transition: 0.3s;
    padding: 4px 2px;
    z-index: 1;
  }

  .toggle-icon.up {
    transform: rotate(180deg);
    bottom: auto;
    top: 0;
  }

  /* 移动端触控优化 */
  .toggle-icon {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .gap-line {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    border-top: 1rpx solid #e8e9ec;
  }

  .play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .arrow-right {
    margin-left: 3rpx;
    width: 14rpx;
    height: 17rpx;
    background: #fff;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }
}
</style>
